<script lang="ts" setup>
import ShowResources from '@/component/Upload/ShowResources.vue'
import { UploadService } from '@/component/Upload/UploadService.ts'
import { ref } from 'vue'


const props = withDefaults(
        defineProps<{
            limit?: number
            uri?: Array<string> | string
            fileId?: Array<string> | string
        }>(),
        {
            limit: 1,
        },
)

const emits = defineEmits<{
    (event: 'update:uri', value: Array<string> | string): void
    (event: 'update:fileId', value: Array<string> | string): void
    (event: 'change'): void
}>()

const inputRef = ref<HTMLInputElement | null>(null)

const {
    onSelect, onBtnClick, onRemoveItem,
    fileList, multiple, uploading, showUploadBtn,
} = new UploadService(props, emits, inputRef)

</script>

<template>
<div class="upload-video">
    <input
            ref="inputRef"
            :disabled="false"
            :multiple="multiple"
            :readonly="false"
            accept="image/*"
            type="file"
            @change="onSelect"
    >

    <template v-for="item in fileList" :key="item.id">
        <div class="card">
            <ShowResources :uri="item.url || item.objectUrl">
                <template #default="{url}">
                    <img :alt="item.name" :src="url">
                </template>
            </ShowResources>
            <div class="mask">
                <IconEdit @click="onBtnClick" />
                <IconDelete @click="onRemoveItem(item)" />
            </div>
            <div v-if="item.status === '上传中' && item.percent! < 100" class="progress-mask">
                <a-progress
                        :percent="item.percent"
                        size="mini"
                        type="circle"
                />
            </div>
        </div>
    </template>

    <div v-if="showUploadBtn" :class="{'disable': uploading}" class="card upload-btn" @click="onBtnClick">
        <div class="text">
            <IconPlus />
            <div>上传</div>
        </div>
    </div>

</div>
</template>

<style lang="scss" scoped>
.upload-video {
    --upload-card-size: 120px;
}

.upload-video {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: stretch;

    input[type="file"] {
        display: none;
    }

    .card {
        flex: 0 0 auto;
        width: var(--upload-card-size);
        height: var(--upload-card-size);
        margin: 0 10px 10px 0;
        box-sizing: border-box;

        color: var(--color-white);
        cursor: pointer;

        border: 1px dashed cornflowerblue;

        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mask,
        .progress-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            background: rgba(0, 0, 0, 0.5);

            justify-content: space-around;
            align-items: center;
        }

        .progress-mask {
            display: flex !important;

            .arco-process {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
        }
    }

    .card:hover {
        .mask {
            display: flex;
        }
    }


    .upload-btn {
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
            margin-top: 10px;
            font-weight: 600;
        }
    }

    .disable {
        cursor: not-allowed;
    }
}
</style>
